
import { useEffect, useState } from 'react';
import { Toast } from 'antd-mobile';
import HeadTitle from '../../components/headtitle';
import MainContainer from '../../components/maincontainer';
import Container from '../../components/container';
import { IData as D1, Query as Q1, Result as R1 } from '../api/activity/avtivity.api';
import { Message as M2, Result as R2 } from '../api/activity/addfollow.api';
import smartfetch from '../../atoms/smartfetch';
import api from '../../atoms/api';
import Infocontainer from './infocontainer';
import Btn from '../../components/btn';
import pages from '../../atoms/pages';
import GroupTitle from '../../components/grouptitle';
import Info from './info';

export default function Content(
	{
		aid,
		type
	}: {
		aid: string;
		type: string
	}) {
	//查询条件
	const [query, setQuery] = useState<Q1>({ aid });
	// 查询返回数据
	const [data, setData] = useState<D1>({} as D1);
	//查询
	async function SearchData(q: Q1) {
		const d = await smartfetch<R1, Q1>(api['/api/activity/avtivity'], 'get', q);
		if (d) {
			setData(d.data);
		}
	}
	//执行
	useEffect(() => {
		void SearchData(query);
	}, [aid]);
	return <>
		<MainContainer>
			<HeadTitle title='我的活动' />
			<Container>
				<GroupTitle title='基本信息' />
				{/* 活动信息 */}
				<Info data={data} />
				{/* 邀请好友 */}
				<a href="weixin">
				<div className='f'>
					<input className='btn' type='button' value='邀请好友参与' onClick={() => {

					}} />
				</div></a>
				{/* 报名人数 */}
				<GroupTitle title='报名人数' />
				<a href={`${pages['/activityregistrationinfo']}?aid=${aid}`}>
					<div className='custom'>
						<span className='lbl'>查看报名情况</span>
						<img className='img' src='/images/right.png' />
					</div>
				</a>
				{/* 按钮 */}
				<div className='btnv'>
					<Btn label='我要报名' onClick={() => {
						if (type === '2') {
							Toast.show({
								content: '您已报过名！',
								position: 'center',
								icon: 'success'
							});
						}
						else {
							window.location.href = `${pages['/signup']}?aid=${data.aid}`;
						}
					}} />
					{/* <Btn label='查看活动二维码' onClick={() => {
						window.location.href = `${pages['/lookoverqr']}?aid=${data.aid}`;
					}} /> */}
					<Btn label='发起新的活动' onClick={() => {
						window.location.href = pages['/newactivityregistration'];
					}} />
					{/* <Btn label='关注此活动' onClick={async () => {
						if (type === '3') {
							Toast.show({
								content: '您已关注过！',
								position: 'center',
								icon: 'success'
							});
						}
						else {
							//调用保存服务
							const result = await smartfetch<R2, M2>(api['/api/activity/addfollow'], 'post', { aid, theme: data.theme });
							if (result.ok) {
								Toast.show({
									content: '关注成功！',
									position: 'center',
									icon: 'success'
								});
							}
							else {
								Toast.show({
									content: '关注失败！',
									position: 'center',
									icon: 'fail'
								});
							}
						}
					}} /> */}
				</div>
			</Container>
		</MainContainer>
		<style jsx>{`
.a{
display:flex;
flex-direction: column;
padding:1rem;
}
.f{
display:flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
margin-top: 2rem;
margin-right: 1rem;
}
.btn{
text-align: center;
width: 8.875rem;
height: 2.125rem;
font-size: 0.875rem;
color: #000000;
background-color: #FFFFFF;
border: 0.0625rem solid #000000;
border-radius: 0.625rem;
}
.btnv{
display:flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
flex-grow: 1;
padding-bottom: 1rem;
}
.lbl{
font-size: 0.875rem;
color: #505D68;
text-shadow: 0rem 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
text-align: end;
}
.img{
height: 0.875rem;
 width: 0.5rem;
}
.custom{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin:0 1rem 0 2.5rem;
}
		`}</style>
	</>;
}
